import React, { Fragment } from "react"
import { CSSTransition, TransitionGroup  } from 'react-transition-group'
import './style.css'

export default class MyTranstion extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      flag: true,
      list: []
    }
    this.toggle = this.toggle.bind(this)
  }

  toggle () {
    const { flag, list } = this.state
    list.push('item________________')
    this.setState({
      flag: !flag,
      list
    })
  }

  render () {
    return (
      <Fragment>
        <TransitionGroup>
        {
          this.state.list.map((item, index) => (
            <CSSTransition 
              timeout={400}
              classNames="fade"
              key={index}
              appear={true}
            >
              <div>{item}</div>
            </CSSTransition>
          ))
        }
        </TransitionGroup>
        <button onClick={this.toggle}>toggle</button>
      </Fragment>
    )
  }
  
}